@import '@/uni.scss';

/* 基础样式重置 */
page {
  font-size: $uni-font-size-base;
  color: $uni-text-color;
  background-color: $uni-bg-color-grey;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}

.border-box{
	box-sizing: border-box;
}

/* 溢出处理 */
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.ellipsis-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Flex布局 */
.flex {
  display: flex;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.flex-grow{
	flex-grow: 1;
}

.align-start {
  align-items: flex-start;
}

.align-center {
  align-items: center;
}

.align-end {
  align-items: flex-end;
}

/* 边距类 */
@each $size, $value in (
  'xs': $uni-spacing-col-xs,
  'sm': $uni-spacing-col-sm,
  'base': $uni-spacing-col-base,
  'md': $uni-spacing-col-md,
  'lg': $uni-spacing-col-lg,
  'xl': $uni-spacing-col-xl,
  'xxl': $uni-spacing-col-xxl,
) {
  .mt-#{$size} { margin-top: $value; }
  .mr-#{$size} { margin-right: $value; }
  .mb-#{$size} { margin-bottom: $value; }
  .ml-#{$size} { margin-left: $value; }
  .mx-#{$size} { margin-left: $value; margin-right: $value; }
  .my-#{$size} { margin-top: $value; margin-bottom: $value; }
  .m-#{$size} { margin: $value; }
  
  .pt-#{$size} { padding-top: $value; }
  .pr-#{$size} { padding-right: $value; }
  .pb-#{$size} { padding-bottom: $value; }
  .pl-#{$size} { padding-left: $value; }
  .px-#{$size} { padding-left: $value; padding-right: $value; }
  .py-#{$size} { padding-top: $value; padding-bottom: $value; }
  .p-#{$size} { padding: $value; }
}

/* 字体大小 */
.text-xs { font-size: $uni-font-size-xs; }
.text-sm { font-size: $uni-font-size-sm; }
.text-md { font-size: $uni-font-size-md; }
.text-base { font-size: $uni-font-size-base; }
.text-lg { font-size: $uni-font-size-lg; }
.text-xl { font-size: $uni-font-size-xl; }
.text-xxl { font-size: $uni-font-size-xxl; }

/* 字体颜色 */
.text-primary { color: $uni-text-color; }
.text-inverse { color: $uni-text-color-inverse; }
.text-theme { color: $uni-text-color-theme; }
.text-theme-dark { color: $uni-text-color-theme-dark; }
.text-grey { color: $uni-text-color-grey; }
.text-placeholder { color: $uni-text-color-placeholder; }
.text-disable { color: $uni-text-color-disable; }

.color-primary { color: $uni-color-primary; }
.color-success { color: $uni-color-success; }
.color-warning { color: $uni-color-warning; }
.color-error { color: $uni-color-error; }


/* 背景颜色 */
.bg-primary { background-color: $uni-bg-color-grey; }
.bg-theme { background-color: $uni-bg-color-theme; }
.bg-theme-light { background-color: $theme-color-light; }
.bg-theme-lightest { background-color: $theme-color-lightest; }
.bg-white { background-color: $uni-bg-color; }
.bg-sub { background-color: $uni-bg-color-sub; }

/* 圆角 */
.radius-sm { border-radius: $uni-border-radius-sm; }
.radius-base { border-radius:$uni-border-radius-base; }
.radius-lg { border-radius: $uni-border-radius-lg; }
.radius-circle { border-radius: $uni-border-radius-circle; }

/* 字体粗细 */
.font-bold { font-weight: bold; }
.font-normal { font-weight: normal; }

/* 其他样式 */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.full-width { width: 100%; }
.full-height { height: 100%; }

.position-relative { position: relative; }
.position-absolute { position: absolute; }

/* 阴影 */
.shadow-sm { box-shadow:$uni-shadow-sm; }
.shadow-base { box-shadow: $uni-shadow-base; }
.shadow-lg { box-shadow: $uni-shadow-lg; }

/* 清除浮动 */
.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 